<template>
  <div class="app-container">
    <!-- 路由出口留好 -->
    <!-- 路由缓存组件 include - 字符串或正则表达式。只有名称匹配的组件会被缓存-->
    <keep-alive :include="['tech-detail', 'find']">
      <router-view></router-view>
    </keep-alive>
    <!-- 使用插件 v-if 保证底部导航只在规定的页面中出现
    这里用到了路由元信息 -->
    <van-tabbar
      v-if="$route.meta.showTabbar"
      v-model="active"
      active-color="#E40137"
      inactive-color="#B4B4BD"
      route
    >
      <van-tabbar-item replace to="/company" icon="home-o">
        <span>公司</span>
        <!-- 这是一个具名插槽, icon是这个插槽的名字 #是v-slot的缩写 -->
        <!-- 格式是仿照vant官方组件库的格式写的,能抄最好不要自己写,自己写费劲而且不一定对 -->
        <template v-slot:icon>
          <i class="iconfont iconicon_footbar_gs_sel"></i>
        </template>
      </van-tabbar-item>
      <van-tabbar-item replace to="/question" icon="search">
        <span>刷题</span>
        <template #icon>
          <i class="iconfont iconicon_footbar_st_sel"></i>
        </template>
      </van-tabbar-item>
      <van-tabbar-item replace to="/find" icon="friends-o">
        <span>发现</span>
        <template #icon>
          <i class="iconfont iconicon_footbar_fx_sel"></i>
        </template>
      </van-tabbar-item>
      <van-tabbar-item replace to="/my" icon="setting-o">
        <span>我的</span>
        <template #icon>
          <i class="iconfont iconicon_footbar_wode_sel"></i>
        </template>
      </van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script>
export default {
  name: 'app',
  data () {
    return {
      active: 1
    }
  }
}
</script>

<style lang="less">
.app-container {
  > div:first-child {
    // >子代 第一个  后代中间是一个空格,跟这个不一样
    // 原始文件
    // 百分百继承页面高度的通用代码,很好用
    min-height: 100vh;
    background-color: @bg-color;
  }
}
</style>
